<template>
    <div class="mui-card">
        <div class="mui-card-header">{{item.roomName}}</div>
        <div class="mui-card-header mui-card-media" style="height:50vw;">
            <img src="http://image.fengyitong.name/Blog%2F20170927%2F9885883_122140091001_2" alt="feng的房间" class="room-image" />
        </div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p style="color: #ccc;">{{remarkText}}</p>
            </div>
        </div>
        <div class="mui-card-footer">
            <a href="javascript:;" class="mui-card-link" @click="joinRoom(item)">我也来参加</a>
            <a v-if="item.createUserKey == userKey" href="javascript:;" class="mui-card-link" @click='removeRoom'>删除房间</a>
        </div>
    </div>
</template>
<script>
export default {
  name: "DrawCard",
  props: {
    item: {
      roomName: String,
      imageUrl: String,
      personList: Array
    }
  },
  computed: {
    userKey() {
      return this.$store.getters.userKey;
    },
    remarkText() {
      let strText = "";
      if (this.item.personList.length == 0) {
        strText = "还没有人在房间里画画...";
      } else if (this.item.personList.length <= 3) {
        for (const person of this.item.personList) {
          strText += "," + person.userName;
        }
        strText += " 正在房间里画画...";
        strText = strText.substr(1);
      } else {
        for (let i = 0; i < 3; i++) {
          const person = this.item.personList[i];
          strText += "," + person.userName;
        }
        strText += " 等人正在房间里画画...";
        strText = strText.substr(1);
      }
      return strText;
    }
  },
  methods: {
    removeRoom() {
      console.log("drawcard removeroom");
      this.$store.dispatch("removeRoom", this.item.key);
    },
    joinRoom(room) {
      // debugger;

      this.$store.dispatch('setRoomInfo',room);
      this.$router.replace("/DrawRoom");
      
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-card-media {
  padding: 3px;
}
.mui-card-header .room-image {
  width: 100%;
  height: 100%;
}
</style>
